<template>
	<view>
		<tui-bottom-popup :show="show" @close="close">
			<tui-list-cell :hover="false">
				<view class="tui-pay-item__title">
					<view>请选择支付方式</view>
					<view>支付金额：<text class="tui-pay-amuont" v-if="memberPrice">￥{{memberPrice}}</text><text class="tui-pay-amuont" v-else>￥{{total_price}}</text></view>

				</view>
			</tui-list-cell>
			<radio-group @change="checks">
				
				<tui-list-cell unlined>
					<label class="tui-pay-item istrue">
						<image src="/static/images/pay/icon_pay_balance.png" class="tui-pay-logo"></image>
						<text v-if="balance<total_price">余额支付（余额{{balance}}，余额支付）</text>
						<text v-else>余额支付（余额{{balance}}）</text>
						<view class="tui-radio" v-if="balance>=total_price">
							<radio color="#ffad10" value="3" checked="checked"></radio>
						</view>
					</label>
				</tui-list-cell>
				<!-- #ifdef H5 || MP-WEIXIN-->
				<tui-list-cell unlined>
					<label class="tui-pay-item">
						<image src="/static/images/pay/icon_pay_weixin.png" class="tui-pay-logo"></image>
						<text>微信支付</text>
						<view class="tui-radio">
							<radio color="#ffa319" value="1"></radio>
						</view>
					</label>
				</tui-list-cell>
				<!-- #endif -->
				<!-- #ifdef H5 || APP-PLUS || MP-ALIPAY-->
				<tui-list-cell unlined>
					<label class="tui-pay-item istrue" :class="{'iswx':iswx}">
						<image src="/static/images/pay/icon_pay_zhifubao.png" class="tui-pay-logo"></image>
						<text>支付宝</text>
						<view class="tui-radio">
							<radio color="#ffad10" value="2"></radio>
						</view>
					</label>
				</tui-list-cell>
				<!-- #endif -->

				<!-- <tui-list-cell unlined>
					<label class="tui-pay-item istrue">
						<image src="/static/images/pay/unipay.png" class="tui-pay-logo"></image>
						<text>银联支付</text>
						<view class="tui-radio">
							<radio color="#ffa319" value="3"></radio>
						</view>
					</label>
				</tui-list-cell> -->
			</radio-group>
			<view class="tui-btn-pay">
				<tui-button height="88rpx" type="warning" shape="circle" shadow @click="btnPay">去付款</tui-button>
			</view>
		</tui-bottom-popup>
		<tui-bottom-popup :show="show2" @close="popupCloses">
			<tui-list-cell :hover="false">
				<view class="tui-pay-item__title">
					<view>请选择支付方式</view>
					<view>支付金额：<text class="tui-pay-amuont">￥{{total_price}}</text></view>
				</view>
			</tui-list-cell>
			<view v-if="banklist==undefined">
				<tui-no-data :fixed="false" imgUrl="/static/images/nodata/error.png">请签约绑定银行卡</tui-no-data>
				<view class="tui-btn-pay">
					<tui-button height="88rpx" type="orange" shape="circle" shadow @click="cardclick">去绑定</tui-button>
				</view>

			</view>
			<radio-group @change="checkbankcode">
				<tui-list-cell unlined v-for="(item,index) in banklist" :key="index">
					<label class="tui-pay-item istrue">
						<image :src="item.bankImg" class="tui-pay-logo"></image>
						<text>{{item.bankname}}</text>
						<view class="tui-radio">
							<radio color="#ffa319" :value="item.id"></radio>
						</view>
					</label>
				</tui-list-cell>

			</radio-group>
			<view class="tui-btn-pay" v-if="banklist">
				<tui-button height="88rpx" type="orange" shape="circle" shadow @click="btnPay">去付款</tui-button>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
	import {
		wxJsPay,
		isWxBrowser
	} from '@/utils/mixin';
	export default {
		name: 'tPayWay',
		props: {
			//控制显示
			show: {
				type: Boolean,
				default: false
			},
			show2: {
				type: Boolean,
				default: false
			},
			page: {
				type: Number,
				default: 1
			},
			total_price: "",
			out_trade_no: '',
			recharge_type: '',
			balance: 0,
			credit_gold: 0,
			sbalance:0,
			isfg: 0,
			iswx: false,
			modal1: false,
			bankcode: '',
			coin: 0,
			banklist: [],
			coupon_money:0,
			memberPrice:0,
			
		},
		data() {
			return {
				pay_type: 3,
				dikou_type: 2,
			};
		},
		methods: {
			wxPay(data) {
				if (isWxBrowser()) {
					let obj = {
						appId: data.appId,
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
					}
					let callback_succ_func = function() {
						this.tui.toast('支付成功');
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/my/my"
							})
						}, 800)
					};
					let callback_error_func = function() {
						this.tui.toast('支付失败');
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					};
					wxJsPay(obj, callback_succ_func, callback_error_func)
				} else {
					uni.showModal({
						title: "提示",
						content: "请使用微信打开进行支付",
						showCancel: false
					})
				}
			},
			close() {
				this.$emit("close", {})
			},
			cardclick() {
				uni.navigateTo({
					url: '../user/addbanks'
				});
			},
			show1() {
				this.modal1 = true;
			},
			hide1: function() {
				this.modal1 = false;
			},
			checkbankcode(e) {
				this.bankcode = e.detail.value;
			},
			popupCloses() {
				this.show2 = false
			},
			checks(e) {
				let that = this;
				this.pay_type = e.detail.value;
             
				if (e.detail.value == 3) {
					this.show2 = true;
					this.show = false;
					this.close();
					/* 查询绑定的银行卡列表 */
					let token = this.tui.getToken();
					let datas = {
						token: token,
					};

					let banklist = this.tui.request('user', 'post', datas, 1000, 1, '', 'memberBankList');
					Promise.resolve(banklist).then((value) => {
						if (value.data.banklist) {

							this.banklist = value.data.banklist;

							this.banklist.map(item => {
								switch (item.bank_card_type) {
									case 1:
										item.bankImg = '/static/images/mybank/gonghang.png'
										item.bankname = '工商银行'

										break;
									case 2:
										item.bankImg = '/static/images/mybank/zhongxin.png'
										item.bankname = '中信银行'

										break;
									case 3:
										item.bankImg = '/static/images/mybank/china.png'
										item.bankname = '中国银行'

										break;
									case 4:
										item.bankImg = '/static/images/mybank/shanghai.png'
										item.bankname = '上海银行'
										break;
									case 5:
										item.bankImg = '/static/images/mybank/guangda.png'
										item.bankname = '光大银行'
										break;
									case 6:
										item.bankImg = '/static/images/mybank/mingsheng.png'
										item.bankname = '民生银行'
										break;
									case 7:
										item.bankImg = '/static/images/mybank/pingan.png'
										item.bankname = '平安银行'
										break;
									case 9:
										item.bankImg = '/static/images/mybank/guangfa.png'
										item.bankname = '广发银行'
										break;
									case 10:
										item.bankImg = '/static/images/mybank/pufa.png'
										item.bankname = '浦发银行'
										break;
									case 11:
										item.bankImg = '/static/images/mybank/jianshe.png'
										item.bankname = '建设银行'
										break;
									case 12:
										item.bankImg = '/static/images/mybank/youzheng.png'
										item.bankname = '邮政银行'
										break;
								}
							})
						}

					})

				}
			},
			btnPay() {
				let token = this.tui.getToken();
				let pays = {};
				// #ifdef H5
				let ua = window.navigator.userAgent.toLowerCase()
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					this.pay_iswx = 1;
				}
				// #endif
				// #ifdef MP-ALIPAY
				  this.pay_iswx = 3;//支付宝小程序
				// #endif
				
				pays = {
					token: token,
					money: this.total_price,
					pay_type: this.pay_type,
					pay_iswx: this.pay_iswx,
					bankcode: this.bankcode,
					recharge_type: this.recharge_type,
					out_trade_no: this.out_trade_no,
				}
				let paytype = this.tui.request('order', 'post', pays, 1000, 1, '', 'orderPay');
				Promise.resolve(paytype).then((value) => {
					if (value.code == 10001) {
						uni.navigateTo({
							url: "../success/success?out_trade_no=" + this.out_trade_no
						})
						return;
					}
					if (this.pay_type == 2) { //支付宝支付
						/* 假如是app的话 */
						// #ifdef H5	
						location.href = value.data.url;
						return;
						// #endif
						// #ifdef MP-ALIPAY
						my.tradePay({
							tradeNO: value.data.trade_no,
							success: function(res) {
								console.log('pay-res: ', res);
							},
							fail: function(err) {
								console.log('pay-err: ', err);
							},
						});
						// #endif
					}
					if (this.pay_type == 3) {
						/*汇聚支付*/
						if (value.code == 10000) {

							this.tui.toast('下单成功');
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/my/my'
								});
							}, 1000)


						} else {
							this.tui.toast(value.message);
						}

					}
					if (value.code == 10000) {
						this.close();
						// #ifdef H5
						let ua = window.navigator.userAgent.toLowerCase()
						if (ua.match(/MicroMessenger/i) == 'micromessenger') {
							//公众号支付
							this.wxPay(value.data);
							return;
						} else {
							location.href = value.data.payInfo;
						}
						// #endif
						//#ifdef APP-PLUS
						plus.runtime.openURL(value.data.mweb_url);
						//#endif
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							appid: value.data.appId,
							timeStamp: value.data.timeStamp,
							nonceStr: value.data.nonceStr,
							package: value.data.package,
							signType: 'MD5',
							paySign: value.data.paySign,
							success: (res) => {
								console.log(res)
								uni.showToast({
									title: "支付成功!"
								})
								uni.navigateTo({
									url: "/pages/success/success?out_trade_no=" + this.out_trade_no
								})
							},
							fail: (res) => {
								this.tui.toast("取消支付");
								uni.navigateTo({
									url: "/pages/success/success?out_trade_no=" + this.out_trade_no
								})
							},
							complete: (res) => {
						           console.log(res)
							}
						})
						// #endif

					} else {
						this.tui.toast(value.message);
					}
				})
			}
		}
	}
</script>

<style scoped>
	.tui-pay-item__title {
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.istrue {
		display: block;
	}

	.tui-pay-amuont {
		color: #ffad10;
		font-weight: 500;
		font-size: 34rpx;
	}

	.iswx {
		display: none !important;
	}

	.tui-pay-item {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.tui-pay-logo {
		width: 48rpx;
		height: 48rpx;
		margin-right: 15rpx;
	}

	.tui-radio {
		margin-left: auto;
		transform: scale(0.8);
		transform-origin: 100% center;
	}

	.tui-btn-pay {
		width: 100%;
		padding: 68rpx 35rpx 50rpx 35rpx;
		box-sizing: border-box;
	}

	.tui-recharge {
		color: #fc872d;
		margin-left: auto;
		padding: 12rpx 0;
	}
</style>
